﻿ 
@using AmazeUI.db
@using Ema.Control
@using Ema.Models.XtModel
 
@model AmazeUI.db.XtRole

@{
    ViewBag.Title = "权限列表";
    var powerses = ViewBag.Powers as IEnumerable<XtPowers>;
}
<div class="am-g">
    <div class="am-u-sm-12 am-u-md-6">
        <div class="am-btn-toolbar">
            <div class="am-btn-group am-btn-group-xs">
                <a href="@Url.Action("addrole","Admin")" class="am-btn am-btn-default"><span class="am-icon-plus"></span> 新增</a>
                <button type="button" class="am-btn am-btn-default"><span class="am-icon-save"></span> 保存</button>
                <button type="button" class="am-btn am-btn-default"><span class="am-icon-archive"></span> 审核</button>
                <button type="button" class="am-btn am-btn-default"><span class="am-icon-trash-o"></span> 删除</button>
            </div>
        </div>
    </div>
    <div class="am-u-sm-12 am-u-md-3">
        <div class="am-form-group">
            <select data-am-selected="{btnSize: 'sm'}">
                <option value="option1">所有类别</option>
                <option value="option2">IT业界</option>
                <option value="option3">数码产品</option>
                <option value="option3">笔记本电脑</option>
                <option value="option3">平板电脑</option>
                <option value="option3">只能手机</option>
                <option value="option3">超极本</option>
            </select>
        </div>
    </div>
    <div class="am-u-sm-12 am-u-md-3">
        <div class="am-input-group am-input-group-sm">
            <input type="text" class="am-form-field">
            <span class="am-input-group-btn">
                <button class="am-btn am-btn-default" type="button">搜索</button>
            </span>
        </div>
    </div>
</div>
<div class="am-g">
    <div class="am-u-sm-12">
        <table class="am-table am-table-striped am-table-hover table-main">
            <thead>
                <tr>
                    <th>@Html.DisplayNameFor(a => a.Id)</th>
                    <th>@Html.DisplayNameFor(a => a.Name)</th>
                    <th>@Html.DisplayNameFor(a => a.Powers)</th>
                    <th>@Html.DisplayNameFor(a => a.AddTime)</th>
                    <th>操作</th>
                </tr>
            </thead>

            <tbody data-bind="foreach:$root.datalist">
                <tr>

                    <td data-bind="text:Id"></td>
                    <td data-bind="text:Name"></td>
                    <td data-bind="foreach:Powers2">
                        <span class="am-badge am-badge-secondary am-radius" data-bind="text:$data">1</span>
                    </td>
                    <td data-bind="text:AddTime"></td>
                    <td>
                        <div class="am-btn-toolbar">
                            <div class="am-btn-group am-btn-group-xs">

                                <button class="am-btn am-btn-default am-btn-xs am-hide-sm-only" data-am-modal="{target: '#editrole', closeViaDimmer: 0,width:800 }" data-bind="click:$root.edit"><span class="am-icon-copy"></span> 编辑</button>
                                <button class="am-btn am-btn-default am-btn-xs am-text-danger am-hide-sm-only"><span class="am-icon-trash-o"></span> 删除</button>
                            </div>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>                                                    

        <!-- /用户列表 -->
      
        <!--分页-->
        <div data-bind="with:page">
            <a class="am-badge  am-radius  am-text-sm am-badge-secondary" data-bind="click:function(){$root.gopage(1)}">第一页</a>
            <a class="am-badge  am-radius  am-text-sm am-badge-secondary" data-bind="click:function(){$root.gopage(up)}">上一页</a>
            <!--ko foreach: vp--> 
            <a class="am-badge  am-radius  am-text-sm" data-bind="css:{'am-badge-secondary ':$data!=$parent.page,'disabled':$data==$parent.page},text:$data,click:function(){$root.gopage($data)}">2</a>
            <!--/ko -->
      
            <a class="am-badge  am-radius  am-text-sm am-badge-secondary" data-bind="click:function(){$root.gopage(next)}">下一页</a>
            <a class="am-badge  am-radius  am-text-sm am-badge-secondary" data-bind="click:function(){$root.gopage(total)}">最后一页</a>
        </div>
        <!--分页-->
    </div>
</div>

<div class="am-modal am-modal-no-btn" id="editrole" tabindex="-1">
    <div class="am-modal-dialog">
        <div class="am-modal-hd">
           编辑
            <a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
        </div>
        <div class="am-modal-bd"  >

            @using (Html.BeginForm("", "", FormMethod.Get, new { @class = "am-form am-form-horizontal", data_bind = "submit:editsub,with:editmodel", id = "editform" }))
            {
                var model = new SubXtRole();
                @Html.AmTestH(a => model.Name, new { data_bind = "value: Name" })
                <div class="am-form-group">
                    @*<label class="am-u-sm-2 am-form-label am-padding-right">@Html.DisplayNameFor(a => model.powers)</label>*@
                    <div class="am-u-sm-6 ">


                        @if (powerses != null)
                        {
                            foreach (var item in powerses)
                            {
                                <label class="am-checkbox-inline">
                                    <input type="checkbox" name="Powers" data-bind="checked: Powers" value="@item.Details"> @item.Name
                                </label>
                            }
                        }
                    </div>
                    <div class="am-hide-sm-only am-text-danger am-u-sm-4 ">
                        <span data-valmsg-replace="true" data-valmsg-for="Name" class="field-validation-valid"></span>
                    </div>
                </div>


                <input value="确定" type="submit" class="am-btn am-btn-primary" />
            }
        </div>

    </div>
</div>


@section scripts{
    <script type="text/javascript" src="/Resource/knockout-3.3.0.js"> </script>
    <script type="text/javascript">
        function Kvm() {
            var k = this;
            //数据集
            k.page = ko.observable();
            k.datalist = ko.observableArray([]);

            k.ss = ko.observable('');

            k.gopage = function(page) {
                fy(page);
            }
            //修改模型
            k.editmodel = ko.observable({
                Powers: ko.observableArray([])
            });

            //修改方法
            k.edit = function($model) {
                var ps = $model.Powers.split('|');
                $model.Powers = ko.observableArray(ps);
                k.editmodel($model);
            };
            // 提交订单
            k.editsub = function() {
                if ($('#editform').valid()) {
                    $.doPost('@Url.Action("RoleEdit", "Admin")', { json: ko.toJSON(k.editmodel) }, function(d) {
                        if (!d.ms) {
                            fy(k.page().page);
                            //按钮变色
                            //$(btn).button('reset');
                            //隐藏修改窗口
                            $('#editrole').modal('close');
                            //信息提示
                            $alert("操作成功", 0);
                        }
                    })
                };
         
            return false;
        };

//删除
        k.del = function($model) {
            //弹窗
            var cf = confirm("确定该删除");
            if (cf) {
                $.doAjaxGet('@Url.Action("userDel", "Admin")' + '?id=' + $model.Id, function(d) {
                    if (d.code == 0) {
                        //信息提示
                        $alert("操作成功", 0);
                        k.datalist.remove($model);
                    }
                });
            }

        };

    }

        var kvm = new Kvm();
        ko.applyBindings(kvm);

        //获取数据
        function fy(page, rows) {
            //行数
            rows = rows || 10;
            $.doPost('@Url.Action("DataRoleList", "Admin")', { page: page, rows: rows, wd: kvm.ss() }, function (d) {
                var opage = $page(page, rows, d.data.count); //绑定
                kvm.page(opage);
                kvm.datalist(d.data.datalist);

            });
        }

        $(function () {
            fy(1);
        });


    </script>
}
